<!-- * 文件名：同意加入
* 作者：ZQK
* 描述：〈描述〉
* 修改人：ZQK
* 修改时间：2025-3-9  -->
<template>
	<view class="joinTeam">
		<image class="logo" :src="getUrl('/partner_recruit.png')" mode=""></image>
		<view class="contentBox">
			<view class="contentBoxImage">
				<image :src="avatar" mode="heightFix"></image>
			</view>
			<view class="contentBoxTop">【{{nickname}}】邀请你加入战队</view>
			<view class="contentBoxBottom">
				{{content}}
			</view>
		</view>
		<view class="btnBox">
			<view class="btnLeft" @click="handleToHome">返回首页</view>
			<view class="btnRight" @click="handleJoinTeam">同意加入</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onShow, onLoad } from "@dcloudio/uni-app"
	import { getUrl } from '@/utils/imagePlugin'
	import Api from '@/api/modules/home.ts'
	
	let avatar = ref<string>('')
	let nickname = ref<string>('')
	let code = ref<string>('')
	let content = ref<string>('')
	
	const handleToHome = () => {
		uni.switchTab({
			url: '/pages/home/home'
		})
	}
	
	let btnLoading = ref<boolean>(false)
	const handleJoinTeam = () => {
		if (!code.value) {
			uni.showToast({ title: '请重试', icon: 'none' });
			return;
		}
		
		if(btnLoading.value){
			return;
		}
		btnLoading.value = true
		
		Api.addTeam(code.value).then((res: any) => {
			uni.showToast({ title: '加入成功！', icon: 'none' });
			setTimeout(()=>{
				uni.switchTab({
					url: '/pages/home/home'
				})
				btnLoading.value = false
			}, 1500)
		}).catch(()=>{
			btnLoading.value = false
		})
	}
	const getSettingInfo = () => {
		Api.getSettingInfo().then((res: any) => {
			content.value = res.data.partnerIntroduction
		})
	}
	
	onLoad((options: any)=>{
		code.value = options.code
		avatar.value = options.avatar
		nickname.value = options.nickname
		getSettingInfo()
	})
</script>

<style lang="scss" scoped>
	.joinTeam{
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		background: #5EB847;
		position: relative;
		
		.logo{
			width: 100%;
			height: 600rpx;
		}
		
		.contentBox{
			background: #ffffff;
			border-radius: 24rpx;
			margin: 32rpx;
			min-height: 600rpx;
			width: 90%;
			position: relative;
			
			.contentBoxImage{
				position: absolute;
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
				border: 1rpx solid #A1A1A1;
				overflow: hidden;
				left: 50%;
				transform: translate(-50%, -50%);
				background-color: #ffffff;
				
				image{
					height: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			
			.contentBoxTop{
				padding-top: 60rpx;
				text-align: center;
				font-size: 32rpx;
				margin-bottom: 20rpx;
			}
			
			.contentBoxBottom{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				
				
				.contentBoxBottomText{
					margin-top: 10rpx;
				}
			}
		}
		
		.btnBox{
			width: 100%;
			padding: 0 40rpx;
			position: absolute;
			bottom: 80rpx;
			display: flex;
			justify-content: space-between;
			
			.btnLeft{
				width: 47%;
				background: #ffffff;
				border: 1rpx solid #5EB847;
				padding: 20rpx;
				color: #5EB847;
				border-radius: 50rpx;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.btnRight{
				width: 47%;
				background: #5EB847;
				border: 1rpx solid #ffffff;
				padding: 20rpx;
				color: #ffffff;
				border-radius: 50rpx;
				font-size: 36rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>